<template>
  <el-dialog
    :title="$t('task.archiveTask')"
    :visible.sync='visible'
    width='70%'
  >
    <el-table
      :data='list'
      border
      stripe
    >
      <el-table-column
        v-for="column in columns"
        :key="column.id"
        :label="column.label"
        :min-width="column.minWidth"
        :prop='column.field'
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template v-if="column.field === 'templateId'">
            {{scope.row.templateName}}
          </template>
          <template v-else-if="column.field === 'suggestion'">
            {{scope.row.suggestion}}
          </template>
          <template v-else-if="column.field === 'taskNo'">

            <sample-tooltip :row="scope.row">
                <template slot="content" slot-scope="{isContentTooltip}">
                  <el-tooltip :content="scope.row[column.field]" placement="top" :disabled="!isContentTooltip">
                    <a 
                      href="#" 
                      @click="openDetail(scope.row, `/task/view/${scope.row.id}`)" 
                      class="task-link">
                      {{scope.row[column.field]}}
                    </a>
                  </el-tooltip>
                </template>
              </sample-tooltip>

          </template>
          <template v-else-if="column.field === 'executor' && scope.row[column.field]">
            {{scope.row[column.field].displayName}}
          </template>
          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { t } from '@src/locales'
import {getList} from '@src/api/ArchiveApi'
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name:'archive-dialog',
  data(){
    return{
      visible:false,
      columns:[
        {
          label: t('common.label.taskNo'),
          field:'taskNo',
          minWidth:140
        },
        {
          label: t('common.label.taskTemplate'),
          field:'templateName',
          minWidth:100
        },
        {
          label: t('common.label.productName'),
          field:'productName',
          minWidth:100
        },
        {
          label: t('common.label.archiveTime'),
          field:'archiveTime',
          minWidth: 150,
          formType: 'datetime'
        },
        {
          label: t('common.label.principalName'),
          field:'principalName',
          minWidth:80
        },
        {
          label: t('common.label.createTime'),
          field:'createTime',
          minWidth: 150,
          formType: 'datetime'
        },
        {
          label: t('common.label.finishTime'),
          field:'finishTime',
          minWidth: 150,
          formType: 'datetime'
        },
        {
          label: t('common.label.evaluation'),
          field:'customerEvaluation',
          minWidth:100
        }
      ],
      list:[]
    }
  },
  methods:{
    async open(params){
      let {code,message,result}=await getList(params);
      if(code===0){
        this.list=result;
      }else{
        this.$notify({
          title: t('common.base.fail'),
          message,
          type: 'error'
        });
      }
      this.visible=true;
    },
    openDetail(row, url){
      if (!window.frameElement) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.id,
        titleKey: row.taskNo,
        fromId
      })
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 5px;
  height: 500px;
  overflow-y: auto;
}
.task-link {
  @include fontColor();
}
</style>
